<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
  </head>

  <body>
    <canvas id="myCanvas" width="600" height="300">
      <p>您的浏览器不支持 canvas!</p>
    </canvas>

    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/jcanvas/dist/jcanvas.js"></script>
    <script>
      var $myCanvas = $('#myCanvas')

      $myCanvas
        .drawRect({
          name: 'blueSquare',
          layer: true,
          draggable: true, // 变为可拖动图层
          bringToFront: true, // 推送到最顶层

          /**
           * @params {Object} layer 当前图层 canvas 对象属性
           */
          // 图层 - 开始拖动
          dragstart: function (layer) {
            console.log('dragstart', layer)
          },

          // 图层 - 拖动中
          drag: function (layer) {
            console.log('drag', layer)
          },

          // 图层 - 停止拖动
          dragstop: function (layer) {
            console.log('dragstop', layer)
          },

          // 图层 - 拖动到画布边界
          dragcancel: function (layer) {
            console.log('dragcancel', layer)
          },

          fillStyle: 'steelblue',
          x: 250,
          y: 150,
          width: 100,
          height: 100,
          rotate: 80,
          shadowX: -1,
          shadowY: 8,
          shadowBlur: 2,
          shadowColor: 'rgba(0, 0, 0, 0.8)',
        })
        .drawRect({
          layer: true,
          draggable: true, // 变为可拖动图层
          bringToFront: true, // 推送到最顶层
          name: 'redSquare',
          fillStyle: 'red',
          x: 190,
          y: 100,
          width: 100,
          height: 100,
          rotate: 130,
          shadowX: -2,
          shadowY: 5,
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        })
    </script>
  </body>
</html>
